<template>
  <div class="reviewApplication-container-padding">
    <el-tabs v-model="tabActive">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.name"
        :label="item.label"
        :name="item.name"
      >
        <component
          :is="tabComponents[item.name]"
          v-if="tabActive == item.name"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
  const tabActive = ref<string>('initiated')

  const tabList = [
    { label: '我发起的申请', name: 'initiated' },
    { label: '待我审核的申请', name: 'waitReview' },
    { label: '所有审核申请', name: 'allReview' },
  ]

  const tabComponents = {
    initiated: defineAsyncComponent(() => import('./initiated/index.vue')),
    waitReview: defineAsyncComponent(() => import('./waitReview/index.vue')),
    allReview: defineAsyncComponent(() => import('./allReview/index.vue')),
  }
</script>

<style lang="scss" scoped>
  .reviewApplication-container-padding {
    :deep(.el-tabs__header) {
      margin: 0 0 20px;
    }
  }
</style>
